<template>
  <div class="top-middle-cmp">
    <div class="chart-name">
      设备完好率月趋势
      <dv-decoration-3 style="width:200px;height:20px;"/>
    </div>
<!--    <dv-charts :option="option"/>-->
    <!-- 年度开工率 -->
    <Echart
        :options="options"
        id="TopMiddleCmp"
        height="100%"
        width="100%"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart'
export default {
  props: {
    chartData: {
      type: Object,
      required: true
    }
  },
  components: {
    Echart,
  },
  name: 'TopMiddleCmp',
  data() {
    return {
      options: {
        tooltip: {
          trigger: 'axis',
          backgroundColor: "rgba(255,255,255,0.1)",
          borderColor:  "rgba(255,255,255,0.1)",
          borderWidth: "0",
          textStyle: {
            color: "#fff"
          },
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
              backgroundColor: "#7B7DDC"
            }
          }
        },
        xAxis: {
          data: function (){
            let date = new Date()
            let day = date.getDate();
            console.log(day)
            const arr = []
            for (let i = 0 ;i < day; i++)
            {
              arr.push(' '+i)
            }
            console.log(arr)
            return arr
          }(),
          boundaryGap: false,
          axisLine: {
            lineStyle: {
               color: '#AAAAAA'
            }
          },
          axisLabel: {
            color: '#AAAAAA',
            fontSize:10
          },
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#AAAAAA'
            }
          },
          axisLabel: {
            color: '#AAAAAA',
            fontSize:10
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            data: function (){
              let date = new Date()
              let day = date.getDate();
              const arr = []
              for (let i = 0 ;i < day; i++)
              {
                arr.push(0)
              }
              return arr
            }(),
            type: 'line',
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(55, 162, 218, 0.6)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(55, 162, 218, 0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            smooth: false
          }
        ]
      }
    }
  },
  watch: {
    chartData: {
      handler(newData) {
        if (newData != null && newData.fault !== undefined) {
          const fault = newData.fault
          const faultAvailabilitys = fault.faultAvailability
          this.options = {
            tooltip: {
              trigger: 'axis',
            },
            xAxis: {
              data: this.getCategory(faultAvailabilitys),
              boundaryGap: false,
              axisLine: {
                lineStyle: {
                  color: '#AAAAAA'
                }
              },
              axisLabel: {
                color: '#AAAAAA',
                fontSize:10
              },
            },
            yAxis: {
              type: 'value',
              splitLine: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: '#AAAAAA'
                }
              },
              axisLabel: {
                color: '#AAAAAA',
                fontSize:10
              },
              axisTick: {
                show: false
              }
            },
            series: [
              {
                data: this.getValue(faultAvailabilitys),
                type: 'line',
                symbol: 'rect',
                areaStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: 'rgba(55, 162, 218, 0.6)' // 0% 处的颜色
                    }, {
                      offset: 1, color: 'rgba(55, 162, 218, 0)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                  }
                },
                smooth: true
              }
            ]
          }
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    getCategory(faultAvailabilitys) {
      const arr = [];
      for (const faultAvailability of faultAvailabilitys) {
        arr.push(faultAvailability.name)
      }
      return arr
    },
    getValue(faultAvailabilitys) {
      const arr = [];
      for (const faultAvailability of faultAvailabilitys) {
        arr.push(faultAvailability.count / 100)
      }
      return arr
    }
  }
}
</script>

<style lang="scss">
.top-middle-cmp {
  position: relative;
  padding: 0 50px;
  box-sizing: border-box;

  .chart-name {
    position: absolute;
    right: 70px;
    text-align: right;
    font-size: 20px;
    top: 10px;
  }
}
</style>
